<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <title>关爱月</title>
    <script>
        ;
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 375) + 'px'
                };
            recalc();
            var tid;
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, function () {
                clearTimeout(tid);
                tid = setTimeout(recalc, 300)
            }, false)
        })(document, window);
    </script>
    <link rel="stylesheet" href="../node_modules/animate.css/animate.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body class="noselect">
    <div id="wrap" style="width: 100%;height: 100%;">
        <div class="w100 h100 abso preload">
            <p class="w100 abso percent">0%</p>
        </div>

        <div id="screen1" class="screen1 w100 h100 abso">
            <img data-src="./assets/icon_screen/blink.jpg" class="lazyLoad eye w100 h100">
            <div class="word1 w100 h100">
                <img data-src="./assets/icon_screen/chan.png" class="lazyLoad animal">
                <img data-src="./assets/icon_screen/font-01.png" class="lazyLoad fonts">
            </div>
            <div class="word2 w100 h100">
                <img data-src="./assets/icon_screen/font-02.png" class="lazyLoad abso fonts">
            </div>
            <div class="word3 w100 h100 abso">
                <img data-src="./assets/icon_screen/font-03.png" class="lazyLoad abso fonts">
                <img data-src="./assets/icon_type3/type3-48.png" class="lazyLoad abso ball">
            </div>
            <button class="skip abso"></button>
        </div>
        <div id="screen2" class="screen2 abso w100 h100">
            <button class="abso"></button>
        </div>
        <div id="drawWarp">
            <div class="w100 abso roombg"></div>
            <div class="shareBanner">
                <img src="" class="qrcode">
                <img data-src="./assets/icon_ui/photoShare.jpg" class="lazyLoad bannerBg">
            </div>
        </div>

        <div id="lastPage">
            <button class="back-btn"></button>
            <img data-src="./assets/last-page.jpg" class="lazyLoad">
        </div>

        <div class="abso wrap-cap">
            <p class="finish-btn"></p>
            <p class="close-tabs"></p>
        </div>
        <div class="w100 abso foot-wrap">
            <div class="w100 tabs-wrap">
                <p class="type type-1 curr"></p>
                <p class="type type-2"></p>
                <p class="type type-3"></p>
                <p class="type type-4"></p>
                <p class="type type-5"></p>
            </div>
            <div class="w100 select-wrap">
                <!--  分类1  -->
                <div id="wrapper1" class="w100 z14 scroll-wrap">
                    <div class="scroller">
                        <div class="switch-btn clearfix">
                            <button class="cur"></button>
                            <button></button>
                            <button></button>
                        </div>
                        <div class="wrap-list">
                            <ul class="clearfix">
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl1.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl2.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl3.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl4.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl5.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl6.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_girl/girl7.png" class="lazyLoad">
                                </li>
                            </ul>
                            <ul class="clearfix">
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy1.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy2.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy3.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy4.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy5.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_boy/boy6.png" class="lazyLoad">
                                </li>
                            </ul>
                            <ul class="clearfix">
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face1.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face2.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face3.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face4.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face5.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face6.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face7.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face8.png" class="lazyLoad">
                                </li>
                                <li data-zindex="3">
                                    <img data-src="./assets/icon_face/face9.png" class="lazyLoad">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  分类2  -->
                <div id="wrapper2" class="w100 z10 scroll-wrap">
                    <div class="scroller">
                        <div class="switch-btn clearfix">
                            <button class="cur"></button>
                            <button></button>
                        </div>
                        <div class="wrap-list">
                            <ul class="clearfix">
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer1.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer2.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer3.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer4.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer5.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer6.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer7.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer8.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer9.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer10.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_summer/summer11.png" class="lazyLoad">
                                </li>
                            </ul>
                            <ul class="clearfix">
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter1.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter2.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter3.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter4.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter5.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter6.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter7.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter8.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter9.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter10.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter11.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter12.png" class="lazyLoad">
                                </li>
                                <li data-zindex="2">
                                    <img data-src="./assets/icon_winter/winter13.png" class="lazyLoad">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--  分类3  -->
                <div id="wrapper3" class="w100 z10 scroll-wrap">
                    <div class="scroller">
                        <ul class="clearfix">
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-1.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-2.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-3.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-4.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-5.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-6.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-7.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-8.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-9.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-10.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-11.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-12.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-13.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-14.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-15.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-16.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-17.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-18.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-19.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-20.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-21.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-22.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-23.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-24.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-25.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-26.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-27.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-28.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-29.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-30.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-31.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-32.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-33.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-34.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-35.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-36.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-37.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-38.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-39.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-40.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-41.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-42.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-43.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-44.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-45.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-46.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-47.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-48.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-49.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-50.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-51.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type3/type3-52.png" class="lazyLoad">
                            </li>
                        </ul>
                    </div>
                </div>
                <!--  分类4  -->
                <div id="wrapper4" class="w100 z10 scroll-wrap">
                    <div class="scroller">
                        <ul class="clearfix">
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-1.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-2.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-3.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-4.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-5.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-6.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-7.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-8.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-9.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-10.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-11.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-12.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-13.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-14.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-15.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-16.png" class="lazyLoad">
                            </li>
                            <li data-zindex="2">
                                <img data-src="./assets/icon_type4/type4-17.png" class="lazyLoad">
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- icon_paper-->
                <div id="wrapper5" class="w100 z10 scroll-wrap">
                    <div class="scroller">
                        <ul class="clearfix">
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type5/type5-1.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type5/type5-2.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type5/type5-3.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type5/type5-4.png" class="lazyLoad">
                            </li>
                            <li data-zindex="3">
                                <img data-src="./assets/icon_type5/type5-5.png" class="lazyLoad">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="w100 h100 abso end-page">
            <div class="btn-block fadeInUp clearfix animated">
                <button class="save-btn"></button>
                <button class="go-next"></button>
            </div>
            <img data-src="assets/Room.jpg" id="finalDesk" class="lazyLoad">
        </div>

        <canvas id="ourCanvas" width="" height=""></canvas>
    </div>

    <script src="./js/base.js"></script>
    <script src="../node_modules/zepto/dist/zepto.js"></script>
    <script src="./js/loader.js"></script>
    <script src="../node_modules/iscroll/build/iscroll.js"></script>
    <script src="../node_modules/alloyfinger/alloy_finger.js"></script>
    <script src="../node_modules/alloyfinger/transformjs/transform.js"></script>
    <script src="../node_modules/html2canvas/dist/html2canvas.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>